import React, { Component } from 'react'

export default class App extends Component {
    a = 100
    b = 200
    // 状态与this指向
    render() {
        return (
            <div>
                <input />
                <button onClick={() => {
                    console.log("click1", "如果处理逻辑较多，不推荐使用此种写法", this.a)
                }
                }>add1</button>

                <button onClick={this.handleClick2.bind(this)}>add2  不推荐此种写法</button>
                {/*让this指向App实例*/}
                <button onClick={this.handleClick3}>add3  比较推荐，没有this指向困扰，但不方便传参</button>

                <button onClick={ ()=> {this.handleClick4()}}>add4</button>  
                {/* 非常推荐，还可以省略大括号，也非常适合传参*/}
                {/* 匿名箭头函数 */}

            </div>
        )
    }

    handleClick2(){
        console.log("click2", this.a) // 能够成功绑定事件，但是this会出现问题  
        // 函数中的this，谁调用我，我指向谁 （要指向react事件系统且丢失，指向undefined）
    }

    handleClick3 = (evt)=>{
        console.log("click3", this.a, evt)  // 箭头函数this永远不管是谁调用，总是指向外部作用域
        console.log("click3", this.a, evt.target)  // 箭头函数this永远不管是谁调用，总是指向外部作用域
    }

    handleClick4(){
        console.log("click4", this.b)
    }
}

/*
    call, 改变this指向并自动执行函数
    apply, 改变this指向并自动执行函数
    bind, 改变this指向不自动执行函数
*/

var obj1 = {
    name:"obj1",
    getName(){
        console.log(this.name)
    }
}

var obj2 = {
    name:"obj2",
    getName(){
        console.log(this.name)
    }
}

// obj1.getName()  this指向obj1,输出结果为obj1
// obj1.getName.call(obj2)
obj1.getName.bind(obj2)()
// obj2.getName()


// 原生dom绑定事件方案
// var obtn = document.getElementById('btn')
// obtn.onclick = function(){
//     console.log(this)   指向obtn按钮
// }

// React不会真正绑定事件到每一个具体元素，而是采用事件代理模式